<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Set States</title>
    <style>
      .g6-tooltip {
        border: 1px solid #e2e2e2;
        border-radius: 4px;
        font-size: 12px;
        color: #545454;
        background-color: rgba(255, 255, 255, 0.9);
        padding: 10px 8px;
        box-shadow: rgb(174, 174, 174) 0px 0px 10px;
      }
    </style>
  </head>

  <body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script src="../build/minimap.js"></script>
    <script src="./assets/d3-4.13.0.min.js"></script>
    <script src="./assets/jquery-3.2.1.min.js"></script>
    <script>
      const minimap = new Minimap({
        size: [200, 160],
      });
      const graph = new G6.Graph({
        container: 'mountNode',
        width: 1000,
        height: 800,
        autoPaint: false,
        plugins: [minimap],
        modes: {
          default: [
            'drag-canvas',
            {
              type: 'tooltip',
              formatText: model => {
                return model.name;
              },
            },
            {
              type: 'edge-tooltip',
              formatText: (model, e) => {
                const edge = e.item;
                return (
                  '来源：' +
                  edge.getSource().getModel().name +
                  '<br/>去向：' +
                  edge.getTarget().getModel().name
                );
              },
            },
            {
              type: 'activate-relations',
              activeState: 'highlight',
              inactiveState: 'dark',
            },
          ],
        },
        defaultNode: {
          size: [10, 10],
          color: 'steelblue',
          style: {
            lineWidth: 2,
            fill: '#fff',
            opacity: 0.8,
          },
        },
        defaultEdge: {
          size: 1,
          style: {
            stroke: '#e2e2e2',
            lineAppendWidth: 2,
          },
        },
        nodeStateStyle: {
          highlight: {
            opacity: 1,
          },
          dark: {
            opacity: 0.2,
          },
        },
        edgeStateStyles: {
          highlight: {
            stroke: '#999',
          },
        },
      });
      $.getJSON('./assets/data/xiaomi.json', data => {
        graph.data({
          nodes: data.nodes,
          edges: data.edges.map((edge, i) => {
            edge.id = 'edge' + i;
            return Object.assign({}, edge);
          }),
        });
        const simulation = d3
          .forceSimulation()
          .force(
            'link',
            d3
              .forceLink()
              .id(function(d) {
                return d.id;
              })
              .strength(0.5),
          )
          .force('charge', d3.forceManyBody())
          .force('center', d3.forceCenter(500, 300));
        simulation.nodes(data.nodes).on('tick', ticked);
        simulation.force('link').links(data.edges);

        graph.render();

        function ticked() {
          graph.refreshPositions();
          graph.paint();
        }
      });
    </script>
  </body>
</html>
